<template>
  <div class='carmanAdmin person'>
    <div class="Table-row">
      <div class="select-box">
        <div class='select-flex child-input' @mouseleave='date_demo.date_list_show=false' @mouseenter='date_demo.date_list_show=true'>
          <label for='address'>当前选择:</label>
          <div class='date_demo input'>{{date_demo.name}}
            <i :class='date_demo.icon_status'></i>
            <div class='select-list' v-show='date_demo.date_list_show'>
              <ul>
                <li @click='choose_date(item)' v-for='(item, index) in date_demo.date_list' :key="index">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class='select-flex child-input' @mouseleave='person_demo.person_list_show=false' @mouseenter='person_demo.person_list_show=true'>
          <label for='address'>人员分类:</label>
          <div class='date_demo input'>{{person_demo.name}}
            <i :class='person_demo.icon_status'></i>
            <div class='select-list' v-show='person_demo.person_list_show'>
              <ul>
                <li @click='choose_person(item)' v-for='(item, index) in person_demo.person_list' :key="index">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class='select-flex child-input' @mouseleave='address_demo.address_list_show=false' @mouseenter='address_demo.address_list_show=true'>
          <label for='address'>地点分布:</label>
          <div class='date_demo input'>{{address_demo.name}}
            <i :class='address_demo.icon_status'></i>
            <div class='select-list' v-show='address_demo.address_list_show'>
              <ul>
                <li @click='choose_address(item)' v-for='(item, index) in address_demo.address_list' :key="index">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class='select-flex device child-input' @mouseleave='device_demo.device_list_show=false' @mouseenter='device_demo.device_list_show=true'>
          <label for='address'>设备筛选:</label>
          <div class='date_demo input'>{{device_demo.name}}
            <i :class='device_demo.icon_status'></i>
            <div class='select-list' v-show='device_demo.device_list_show'>
              <ul>
                <li @click='choose_device(item, index)' v-for='(item, index) in device_demo.device_list' :key="index">
                  <span :class="['check', {checkTrue: item.check}]"></span>
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class='btn-group btn-group-sm'>
          <button type="button" class='btn btn-default'>确定</button>
          <button type="button" class='btn btn-default'>重置</button>
        </div>
      </div>
      <div class='select-table'>
        <div class="table-title">
          <ul>
            <li
              :style="{width:item.width}"
              v-for="(item, index) in table_title" :key="index">
              {{item.text}}
            </li>
          </ul>
        </div>
        <div class="table-content">
          <ul>
            <li v-for="(item, index) in table_content" :key="index">
              <div @click="click_li(childs, _index)" v-for="(childs, _index) in item" class="child" :key="_index">
                <span v-if="_index !== 'set' && _index !== 'pic'">{{childs}}</span>
                <img class="imgs" v-if="_index == 'pic'" src="../../../assets/images/default.png" />
                <i @click="dialogShow = true" class="look" v-if="_index === 'set'"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--表格翻页  -->
    <Pages
      v-if="table_content"
      v-show="table_info.all_totle !== 0"
      :showItem="5"
      :pageSize="20"
      :allDataSum="table_info.all_totle"
      :allpage="(Math.ceil(table_info.all_totle/20))"
      @current-change="tablePageData"
    >
    </Pages>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >

      <div class="modal-ctrl-body" v-show="carInfo.isShow">
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>车辆信息</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="even-row">
              <div  class="modal-row" v-for="item in carInfo.list">
                <div class="modal-form-key f-l indispensable">
                  {{item.name}}：
                </div>
                <input v-if="item.name !=='重点人图像' && item.name !=='重点人车辆'" type="text" maxlength="16" disabled placeholder="最长16个字符" v-model="item.value" class="modal-text f-l">
                <img v-if="item.name =='重点人图像' || item.name =='重点人车辆'" class="stress-img" :src="item.value" />
              </div>
            </div>
          </div>
          <div class="btns text-r">
            <!--<button type="button" class="btn btn-default">取消</button>-->
            <button type="button" @click="carInfo.isShow = false" class="btn btn-info">确定</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import indexController from './indexController'
  export default indexController
</script>

<style lang='less'>
  @import "../../../../static/css/carPerson.less";
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>


